<!-- 友链 -->
<template>
	<div>
		<HEADER></HEADER>
		<div class="container">
			<div class="columns">
				<div class="mine-columns">

					<div class="card pageHead">
						<h1>友链</h1>
					</div>
					<div class="card" v-if="linkList.length!==0">
						<div class="friendList">
							<span v-for="(item,index) in linkList" :key="index">
								<a :href="item.herfLink" class="item" target="view_window">
									<div class="avatar">
										<img :src="item.iconLink">
									</div>
									<div class="text">
										<div class="name">{{item.nameLink}}</div>
										<div class="dsc">{{item.descLink}}</div>
									</div>
								</a>
							</span>
						</div>
					</div>

					<div class="card pageHead">
						<h1>本站信息</h1>
						<div class="myinfoWeb">
							<div class="item">
								<div class="name">博客名称：</div>
								<div class="text">{{siteInfo.name}}</div>
							</div>
							<div class="item">
								<div class="name">博客描述：</div>
								<div class="text">{{siteInfo.desc}}</div>
							</div>
							<div class="item">
								<div class="name">博客地址：</div>
								<div class="text color copy1" @click="copy1">{{siteInfo.link}}</div>
							</div>
							<div class="item">
								<div class="name">博客标志：</div>
								<div class="text color copy2" @click="copy2">{{siteInfo.logo}}</div>
							</div>
						</div>
					</div>

					<div class="card pageHead">
						<h1>申请友链</h1>
						<div class="friendForm">
							<el-form ref="friendForm" :model="friendForm" label-width="100px" :rules="rules">
								<el-form-item label="选择类型">
									<el-radio-group v-model="friendForm.type">
										<el-radio label="tobeLink">新增友链</el-radio>
										<el-radio label="reneLink">旧链更新</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="博客名称" prop="name">
									<el-input v-model="friendForm.name" placeholder="请输入博客名称" maxlength="12"
										show-word-limit></el-input>
								</el-form-item>
								<el-form-item label="博客描述" prop="desc">
									<el-input v-model="friendForm.desc" placeholder="请输入博客描述" maxlength="30"
										show-word-limit></el-input>
								</el-form-item>
								<el-form-item label="博客地址" prop="link">
									<el-input v-model="friendForm.link" placeholder="请输入博客地址" show-word-limit>
									</el-input>
								</el-form-item>
								<el-form-item label="博客logo" prop="icon">
									<el-input v-model="friendForm.icon" placeholder="请输入博客logo" show-word-limit>
									</el-input>
								</el-form-item>
								<el-form-item label="您的邮箱" prop="email">
									<el-input v-model="friendForm.email" placeholder="请输入您的邮箱便于联系" show-word-limit>
									</el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('friendForm')">立即提交</el-button>
									<el-button @click="resetForm('friendForm')">取消</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>

					<div class="card pageHead">
						<h1>友链申请规则</h1>
						<div class="myinfoWeb">
							<p>先友后链，申请前请先提前做好本站友情链接ヾ(≧▽≦*)o</p>
							<p>凡内容污秽、暴力的、广告挂马的、违背社会主义核心价值观的勿扰(*￣︿￣)</p>
							<p>违反国家法律、政治相关内容、带有恶意攻击等网站拒加￣へ￣</p>
							<p>若本站友链在贵站删除，请及时告知，也请站在道德修养的角度上不要单向链(○`3′○)</p>
							<p>本站也会定期查看双方是否互为友链，如果取消本站友链，本站也会将您的友链移除┑(￣Д ￣)┍</p>
							<p>本站会定期清理无法访问的友链，如果更换了链接信息请发送邮件告知，谢谢合作(●'◡'●)ﾉ♥</p>
							<br>
							<h4>最后：任何问题，均可 <span @click="webmaster">联系站长Email -- wei.0528@foxmail.com</span> </h4>
						</div>
					</div>
				</div>
				<LeftView @buttClassfy="buttClassfy" @buttLable="buttLable"></LeftView>
				<RighthView @buttArticle="buttArticle" @buttArchive="buttArchive"></RighthView>
			</div>
		</div>
		<Gotop></Gotop>
		<FOOTER></FOOTER>
	</div>
</template>

<script>
	import HEADER from '../components/header.vue'
	import FOOTER from '../components/footer.vue'
	import LeftView from '../components/leftView.vue'
	import RighthView from '../components/righthView.vue'
	import Gotop from '../components/gotop.vue'
	export default {
		name: 'Friend',
		data() {
			var logEmail = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('邮箱不能为空'));
				}
				setTimeout(() => {
					var emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
					if (!emailReg.test(value)) {
						callback(new Error('请注意邮箱格式'));
					} else {
						callback();
					}
				}, 500);
			};
			return {
				siteInfo: {
					name: '肥菇凉',
					desc: '彦彦和彦彦家的肥菇凉',
					link: 'https://yajiejie.top',
					logo: 'https://www.yajiejie.top/image/yajiejieLogo.png',
				},
				linkList: [],
				friendForm: {
					email: '',
					name: '',
					desc: '',
					link: '',
					icon: '',
					type: 'tobeLink'
				},
				rules: {
					email: {required: true,validator: logEmail},
					name: {
						required: true,
						message: '请输入博客名称',
						trigger: 'blur'
					},
					link: {
						required: true,
						message: '请输入博客地址',
						trigger: 'blur'
					},
					icon: {
						required: true,
						message: '请输入博客logo',
						trigger: 'blur'
					},
				}
			}
		},
		mounted() {
			this.getBlogsExtLink();
		},
		methods: {
			// 表单提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post(this.HOST + '/api/addFriendForm', {
							email: this.friendForm.email,
							name: this.friendForm.name,
							desc: this.friendForm.desc,
							link: this.friendForm.link,
							icon: this.friendForm.icon,
							type: this.friendForm.type
						}).then(res => {
							this.$notify({
								title: '提交成功！',
								type: 'success'
							})
							console.log('提交成功', res.data)
						}).catch(err => {
							console.log(err, ' catch ')
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			webmaster(){
				this.$router.push({path: '/About'})
			},
			// 拉取数据
			getBlogsExtLink() {
				this.$axios.post(this.HOST + '/api/blogExtLink').then(res => {
					let data = res.data.data;
					for (let i = 0; i < data.length; i++) {
						if (data[i].typeLink == 'extLink') {
							this.linkList.push(data[i])
						}
					}
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			// 分类
			buttClassfy(e) {
				this.$router.push({
					path: '/ArrayItem',
					query: {
						arr: e
					}
				})
			},
			// 标签
			buttLable(e) {
				this.$router.push({
					path: '/ArrayItem',
					query: {
						arr: e
					}
				})
			},
			// 最近文章
			buttArticle(e) {
				this.$router.push({
					path: '/Article',
					query: {
						ArtID: e.ArtID
					},
				})
			},
			// 归档
			buttArchive(e) {
				this.$router.push({
					path: '/ArrayItem',
					query: {
						arr: e
					}
				})
			},
			// 点击复制https://yajiejie.top
			copy1() {
				var clipboard = new this.Clipboard('.copy1', {
					target: function() {
						return document.querySelector('.copy1');
					}
				})
				clipboard.on('success', e => {
					console.log(e.text, 11111111)
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					console.log(e.text, 222)
					console.log('该浏览器不支持自动复制')
					clipboard.destroy()
				})
			},
			copy2() {
				var clipboard = new this.Clipboard('.copy2', {
					target: function() {
						return document.querySelector('.copy2');
					}
				})
				clipboard.on('success', e => {
					console.log(e.text, 11111111)
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					console.log(e.text, 222)
					console.log('该浏览器不支持自动复制')
					clipboard.destroy()
				})
			},

		},
		components: {
			HEADER: HEADER,
			FOOTER: FOOTER,
			LeftView: LeftView,
			RighthView: RighthView,
			Gotop: Gotop
		},
	}
</script>

<style>
	.friendForm,
	.myinfoWeb {
		padding: 0 2em 2em 2em;
		color: #475b6d;
	}

	.myinfoWeb {
		padding: 0 2em 2em 2em;
		color: #475b6d;
	}

	.myinfoWeb p {
		margin: 6px 12px;
		font-size: 0.84em;
	}

	.myinfoWeb .item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 12px;
	}

	.myinfoWeb .item .name {
		font-size: 1.1em;
		font-weight: bold;
		width: 90px;
		height: 24px;
		overflow: hidden;
	}

	.myinfoWeb .item .text {
		margin: 0 0 0 12px;
		font-size: 1em;
	}

	.myinfoWeb .item .color {
		color: #2567e5;
	}

	form.el-form {
		width: 92%;
	}

	@media screen and (max-width:590px) {
		.myinfoWeb .item {
			display: block;
		}

		.myinfoWeb .item .text {
			margin: 0;
			padding: 10px 0 0 1em;
			width: 100%;
			overflow: auto;
		}
	}
</style>
